<template>
  <div class="key">
    <div class="alert">
      <span>通过激活码找回账号适用于：账号通过实体卡上的激活码购买的激活码激活会员权限。</span>
    </div>
    <div class="inputBox">
      <span class="name">激活码：</span>
      <el-input
        @focus="keyFalse=false"
        @blur="keyVerify"
        v-model="key"
        placeholder="请输入您的激活码">
      </el-input>
      <p class="verify"><span v-show="keyFalse" v-text="keyRule"></span></p>
      <a>如何找到激活码?</a>
    </div>
    <div class="btn">
      <el-button @click="confirmFind">确认</el-button>
    </div>
    <aside>
      <el-dialog
        :visible.sync="isOpenDialog"
        width="70%"
        :show-close="false"
        :close-on-click-modal="false">
        <div style="max-height: 600px;overflow:auto;">
          <successAccount
            :accountList="accountList"
            :findResult="findResult"/>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="isOpenDialog=false">确 定</el-button>
        </span>
      </el-dialog>
    </aside>
  </div>
</template>

<script>
    import { getAccountByKey  } from '../../../../../api/getBack.js'
    import successAccount from '../successAccount.vue'
    export default {
        name: "key",
        props: {

        },
        data() {
            return {
                // 激活码
                keyFalse: false,
                keyRule: '',
                key: '',
                // 学生账户
                findResult: '账号找回成功',
                accountList: [],
                isOpenDialog: false,
            }
        },
        mounted() {

        },
        components: {
            successAccount
        },
        methods: {
            // 切换tabs时清空验证规则
            clearRules() {
                this.keyFalse = false;
            },
            // 校验激活码
            keyVerify() {
                if(this.key) {
                    this.keyFalse = false;
                }else{
                    this.keyRule = '激活码不可为空';
                    this.keyFalse = true;
                }
            },
            // 确认
            async confirmFind() {
                this.keyVerify();  // 校验激活码
                if(!this.keyFalse) {
                    const res = await getAccountByKey({
                        'activeCode': this.key
                    });
                    if(res.data.status) {
                        this.findResult = '账号找回成功';
                        this.accountList = res.data.data;
                        this.isOpenDialog = true;
                    }else{
                        if(res.data.msg) {
                            this.keyRule = res.data.msg;
                            this.keyFalse = true;
                        }
                    }
                }
            }
        }
    }
</script>

<style scoped lang="scss">
  @import '../../../../../styles/common.scss';
  .key{
    .alert{
      text-align: center;
      span{
        display: inline-block;
        background-color: #fff6e8;
        color: #ff7f21;
        border-radius: 5px;
        padding: 4px 16px;
        text-align: center;
      }
    }
    .inputBox{
      width: 50%;
      margin: 20px auto 0;
      span.name{
        display: inline-block;
        width: 26%;
        text-align: center;
      }
      .el-input,.el-select{
        display: inline-block;
        width: 73%;
        margin: 3px 0;
      }
      p.verify{
        height: 18px;
        margin-left: 27%;
        span{
          color: #f00;
        }
      }
      a{
        display: block;
        text-align: right;
        color: #2e86ff;
        padding-right: 4px;
        cursor: pointer;
      }
      .el-button{
        margin: 4px auto 30px;
        display: block;
        width: 100%;
        background-color: #2e86ff;
        color: #fff;
      }
    }
    .btn{
      width: 50%;
      margin: 4px auto 0;
      padding-bottom: 60px;
      .el-button{
        width: 100%;
        background-color: #2f8efa;
        color: #fff;
      }
    }
  }
</style>